<template>
    <div>
        <el-card class="box-card">
            <div slot="header" class="clearfix">
                <div>
                    <el-input placeholder="根据账号搜索" suffix-icon="el-icon-search" v-model="searchContent"
                    @keyup.enter.native="getLoginLogDate(pageSize, 1, searchContent)"></el-input>
                </div>
                <div>
                    <!-- <el-button type="info" @click="refresh" icon="el-icon-refresh-right">重置</el-button> -->
                </div>
            </div>
            <div class="text item">
                <el-table :data="loginLogList" border style="width: 100%" v-loading="loading">
                    <el-table-column prop="id" label="ID" width="180"></el-table-column>
                    <el-table-column prop="username" label="账号" width="180"></el-table-column>
                    <el-table-column prop="ip" label="IP地址" width="180"></el-table-column>
                    <el-table-column prop="createTime" label="创建时间" width="180">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="更新时间" width="180">
                    </el-table-column>
                    <el-table-column prop="status" label="状态" width="80">
                        <template slot-scope="scope">
                            <el-tag type="success" v-show="scope.row.status == 1">正常</el-tag>
                            <el-tag type="danger" v-show="scope.row.status == 2">禁用</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column fixed="right" label="操作" width="200">
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="">编辑</el-button>
                            <el-button type="text" size="small" @click="">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination background layout="prev, pager, next" :total="totalPage" :page-size="pageSize" 
                @current-change="currentChange">
                </el-pagination>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: "LoginLog",
    data() {
        return {
            // 是否加载
            loading: false,
            // 搜索内容
            searchContent: "",
            // 多选数据
            multipleSelection: [],
            // 当前页数
            currentPag: 1,
            // 每页大小
            pageSize: 10,
            // 总页数
            totalPage: 0,
        }
    },
    mounted() {
        this.getLoginLogDate(this.pageSize, this.currentPag, this.searchContent)
    },
    methods: {
        async getLoginLogDate(pageSize, currentPag, searchContent) {
            this.loading = true
            let res = await this.$store.dispatch("getLoginLogList", {
                pageSize: pageSize,
                currentPag: currentPag,
                content: searchContent
            })
            if (!res.success) this.$myfun.resError(res)
            else {
                this.totalPage = parseInt(res.data.totalPag)
                this.currentPag = parseInt(res.data.currentPag)
                this.pageSize = parseInt(res.data.pageSize)
                this.loading = true
            }
        },
        // 更换页数
        currentChange(pag){
            this.getLoginLogDate(this.pageSize, pag, this.searchContent)
        }
    },
    computed: {
        loginLogList() {
            return this.$store.state.log.loginLogList
        }
    }
}
</script>

<style scoped>
.clearfix {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.pagination {
    margin: 15px 0 0 0;
    text-align: center;
}
</style>